{% extends 'base.html' %}
{% block title %}首页 - 今天吃啥呢{% endblock %}

{% block content %}
    <!-- 搜索栏 -->
    <form method="get" class="mb-4">
        <div class="input-group">
            <input type="text" name="q" class="form-control" placeholder="搜索菜名、标签或店铺"
                   value="{{ request.GET.q }}">
            <button class="btn btn-primary" type="submit">搜索</button>
        </div>
    </form>
    <!-- 帮我选一道菜 表单 -->
    <form method="get" action="{% url 'suggest_recipe' %}" class="mb-4">
        <div class="row g-2 align-items-end">
            <!-- 基础筛选条件 -->
            <div class="col-auto">
                <label for="max_minutes" class="form-label">最多耗时（分钟）</label>
                <input type="number" name="max_minutes" id="max_minutes" class="form-control" min="1" placeholder="不限"
                       value="{{ request.GET.max_minutes }}">
            </div>

            <div class="col-auto">
                <label for="min_rating" class="form-label">最低评分</label>
                <select name="min_rating" id="min_rating" class="form-select">
                    <option value="" {% if not request.GET.min_rating %}selected{% endif %}>不限</option>
                    {% for r in rating_choices %}
                        <option value="{{ r }}" {% if request.GET.min_rating == r %}selected{% endif %}>{{ r }} 及以上
                        </option>
                    {% endfor %}
                </select>
            </div>

            <div class="col-auto">
                <button type="submit" class="btn btn-success">帮我选一道菜</button>
            </div>
        </div>

        <!-- 折叠触发按钮 -->
        <a class="btn btn-link mt-2 px-0" data-bs-toggle="collapse" href="#advancedFilters" role="button"
           aria-expanded="false" aria-controls="advancedFilters">
            高级筛选 &darr;
        </a>

        <!-- 折叠内容 -->
        <div class="collapse mt-3" id="advancedFilters">
            <div class="row g-3">
                <div class="col-md-4">
                    <label for="price_tier" class="form-label">价格档次</label>
                    <select name="price_tier" id="price_tier" class="form-select">
                        <option value="" {% if not request.GET.price_tier %}selected{% endif %}>不限</option>
                        <option value="低" {% if request.GET.price_tier == "低" %}selected{% endif %}>低</option>
                        <option value="中" {% if request.GET.price_tier == "中" %}selected{% endif %}>中</option>
                        <option value="高" {% if request.GET.price_tier == "高" %}selected{% endif %}>高</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label for="difficulty" class="form-label">难易度</label>
                    <select name="difficulty" id="difficulty" class="form-select">
                        <option value="" {% if not request.GET.difficulty %}selected{% endif %}>不限</option>
                        <option value="简单" {% if request.GET.difficulty == "简单" %}selected{% endif %}>简单</option>
                        <option value="中等" {% if request.GET.difficulty == "中等" %}selected{% endif %}>中等</option>
                        <option value="困难" {% if request.GET.difficulty == "困难" %}selected{% endif %}>困难</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label for="only_takeaway" class="form-label">仅外卖</label>
                    <select name="only_takeaway" id="only_takeaway" class="form-select">
                        <option value="" {% if not request.GET.only_takeaway %}selected{% endif %}>不限</option>
                        <option value="1" {% if request.GET.only_takeaway == "1" %}selected{% endif %}>是</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label for="prefer_category" class="form-label">优先分类</label>
                    <select name="prefer_category" id="prefer_category" class="form-select">
                        <option value="" {% if not request.GET.prefer_category %}selected{% endif %}>不限</option>
                        {% for category in categories %}
                            <option value="{{ category.id }}"
                                    {% if request.GET.prefer_category == category.id|stringformat:"s" %}selected{% endif %}>{{ category.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-md-4">
                    <label for="prefer_made_count" class="form-label">优先吃过次数多</label>
                    <select name="prefer_made_count" id="prefer_made_count" class="form-select">
                        <option value="" {% if not request.GET.prefer_made_count %}selected{% endif %}>否</option>
                        <option value="1" {% if request.GET.prefer_made_count == "1" %}selected{% endif %}>是</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label for="keyword" class="form-label">关键词搜索</label>
                    <input type="text" name="keyword" id="keyword" class="form-control" placeholder="食材/描述"
                           value="{{ request.GET.keyword }}">
                </div>
            </div>
        </div>
    </form>
    <!-- 标签筛选 -->
    <div class="mb-3">
        <strong class="me-2">按标签筛选：</strong>
        {% for tag in tags %}
            <a href="?tag={{ tag.id }}"
               class="badge bg-info text-dark text-decoration-none me-1 mb-1">{{ tag.name }}</a>
        {% endfor %}
    </div>

    <!-- 排序按钮 -->
    <div class="mb-4">
        <strong>排序：</strong>
        <a href="?sort=rating"
           class="btn btn-sm btn-outline-warning {% if request.GET.sort == 'rating' %}active{% endif %}">按评分高到低</a>
        <a href="?sort=recent"
           class="btn btn-sm btn-outline-secondary {% if request.GET.sort == 'recent' %}active{% endif %}">按最新添加</a>
    </div>

    <h4 class="mb-3">🍳 所有菜谱</h4>
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
        {% for recipe in recipes %}
            <div class="col">
                <div class="card h-100 shadow-sm" style="transition: transform 0.3s ease;">
                    <a href="{% url 'recipe_detail' recipe.id %}" class="d-block overflow-hidden">
                        {% if recipe.images.first %}
                            <img src="{{ recipe.images.first.image.url }}" loading="lazy" class="card-img-top"
                                 alt="{{ recipe.title }}" style="object-fit: cover; height: 180px; width: 100%;">
                        {% else %}
                            <div class="bg-light d-flex align-items-center justify-content-center"
                                 style="height:180px;">
                                <span class="text-muted">暂无图片</span>
                            </div>
                        {% endif %}
                    </a>
                    <div class="card-body d-flex flex-column">
                        <!-- 菜名 -->
                        <h5 class="card-title text-truncate" title="{{ recipe.title }}">{{ recipe.title }}</h5>

                        <!-- 分类 -->
                        <p class="mb-1 text-muted">
                            🍽 {{ recipe.category|default:"未分类" }}
                        </p>

                        <!-- 位置 / 店铺 -->
                        {% if recipe.category == "堂食" and recipe.location %}
                            <p class="mb-1">📍 {{ recipe.location }}</p>
                        {% elif recipe.category == "外卖" and recipe.shop_name %}
                            <p class="mb-1">🏪 {{ recipe.shop_name }}</p>
                        {% endif %}

                        <!-- 评分 -->
                        <p class="mb-1">
                            ⭐ {{ recipe.rating|default:"未评分" }}
                        </p>

                        <!-- 简介 -->
                        <p class="card-text text-truncate" style="flex-grow: 1;"
                           title="{{ recipe.description }}">{{ recipe.description }}</p>

                        <!-- 已吃次数 -->
                        <p class="text-muted mb-1">🍴 已经吃过 {{ recipe.made_count }} 次</p>

                        <!-- 按钮 -->
                        <a href="{% url 'recipe_detail' recipe.id %}"
                           class="btn btn-outline-primary btn-sm mt-auto align-self-start">详情</a>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <style>
        /* 卡片悬浮放大效果 */
        .card:hover {
            transform: scale(1.03);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
            z-index: 5;
        }

        /* 标签悬浮变色 */
        a.badge:hover {
            background-color: #0dcaf0 !important;
            color: #000 !important;
            text-decoration: none !important;
        }
    </style>
{% endblock %}
